<template>
  <div class="classify">
    <div class="allGoods">
      <van-tree-select
        height="100%"
        :items="items"
        @click-nav="clickNav"
        :main-active-index.sync="active"
      >
        <template #content>
          
        <van-grid :column-num="3" clickable>
          <van-grid-item v-for="item in goodsArr" :key="item.cp_id" @click="toGoodsDetails(item)">
            <van-image :src="item.cp_tupian" />
            <p class="goodsName">{{ item.cp_mingcheng }}</p>
            <p class="goodsPrice">￥{{ item.jiage }}</p>
          </van-grid-item>
        </van-grid>
        <!-- 空 提示 -->
        <van-empty v-if="goodsArr.length === 0" description="暂无商品,试试其他分类" />
        </template>
      </van-tree-select>
    </div>

    <!-- 底部导航 -->
    <PageTabs :childActive="1"></PageTabs>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
import PageTabs from "@/components/PageTabs";
export default {
  name: "classify",
  components: {
    PageTabs,
  },
  data() {
    return {
      active: 0,
      items: [],
      goodsArr: [],
    };
  },
  mounted() {
    this.getClassify();
  },
  methods: {
    getClassify() {
      SERVE.getClassify()
        .then((res) => {
          let resData = res.data;
          for (const goods of resData) {
            // 格式化数据
            this.items.push({ id: goods.id, text: goods.name });
          }
          this.clickNav();
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    clickNav() {
      SERVE.getClassifyInfo({
        params: {
          int_lxid1: this.items[this.active].id,
        },
      })
        .then((res) => {
          this.goodsArr = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    toGoodsDetails(item){
      this.$router.push({path: '/goodsDetails', query: {id: item.cp_id}});
    }
  },
};
</script>

<style lang="scss" scoped>
.classify {
  .allGoods {
    height: calc(100vh - 50px);
    overflow-y: scroll;
    word-break: break-all;
    
    .goodsName {
      font-size: 12px;
    }
    .goodsPrice {
      font-size: 12px;
      color: #ff4500;
    }
  }
}
</style>
